<template>
	<div class="ContainerDiv">
		<el-tooltip
			class="item"
			effect="dark"
			placement="top"
			:disabled="!showOverflowTooltip">
			<div slot="content">
				<slot name="content" :row="contentData">
					{{ contentData }}
				</slot>
			</div>
			<div class="text" ref="div" v-bind="$attrs">
				{{ contentData | _setEmpty }}
			</div>
		</el-tooltip>
	</div>
</template>

<script>
	export default {
		name: 'ATooltipDiv',
		props: {
			content: {
				required: false,
			},
		},
		components: {},
		data() {
			return {
				showOverflowTooltip: false,
				ob: null,
			};
		},
		computed: {
			contentData() {
				return this.content?.toString();
			},
		},
		created() {},
		mounted() {
			this.$nextTick(() => {
				this.ob_do();
			});
			this.initOb();
		},
		beforeDestroy() {
			this.removeOb();
		},
		methods: {
			initOb() {
				if (!this.$refs.div) return;
				this.ob = new MutationObserver(this.ob_do);
				this.ob.observe(this.$refs.div, {
					subtree: true,
					characterData: true,
				});
			},
			ob_do() {
				this.$nextTick(() => {
					if (!this.$refs.div) return;
					let scrollWidth = this.$refs?.div?.scrollWidth;
					let clientWidth = this.$refs?.div?.clientWidth;
					if (!scrollWidth || !clientWidth) return;
					this.showOverflowTooltip = scrollWidth > clientWidth;
				});
			},
			removeOb() {
				this.ob && this.ob.disconnect(this.$refs.div);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.ContainerDiv {
		width: 100%;
	}
	.text {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		box-sizing: border-box;
	}
</style>
